import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Empty, Button } from 'react-vant';
export default function Jiankong() {
  const location = useLocation();
  const navigate = useNavigate()
  // 安全地获取 item，避免解构时出错
  const item = location.state?.item;
  return (
    <div>
      {item != null ?
        <div>
          {
            item.map(i => {
              return <div key={i._id}>
                <h1 style={{ textAlign: 'center' }}>  {i.name}</h1>
                <div className='a3'>
                  {i.children1.map(ii => {
                    return <div key={ii._id} className='a4'>
                      <h3>{ii.name1}</h3>
                      <video onClick={() => { navigate(`/index/kitchen/mingchu`, { state: { item: [{ img1: ii.img1 }] } }) }} style={{ width: '100%' }} >
                        <source src={ii.img1} type="video/mp4" />
                      </video>
                    </div>
                  })}
                </div>
              </div>
            })
          }
        </div> :
        <div>
          <Empty description="请点击您要观看的视频区域">
            <Button style={{ width: 160 }} round type="primary" onClick={() => { navigate('/index/kitchen/shipin') }}>
              按钮
            </Button>
          </Empty>
        </div>}
    </div>
  )
}


